<template>
  <!-- 导航菜单容器，router表示开启路由控制，一般都要设置 -->
  <!-- 还可以可控制背景颜色，字体颜色 -->
  <el-menu router background-color="#2A3F54" text-color="#fff" >
    <h1 class="aside-title">客户关系管理系统</h1>
    <el-row class="aside-user">
      <el-col :span="10" :offset="2">
        <!-- 头像组件，比较简单，size表示大小，src图片地址 -->
        <!-- <el-avatar :size="60" :src="$store.state.userInfo.avatar">
        </el-avatar> -->
      </el-col>
      <!-- 显示用户信息 -->
      <el-col :span="12">
        <h3>欢迎您</h3>
        <h3>{{$store.state.userInfo.username}}</h3>
      </el-col>
    </el-row>
   <!-- el-submenu表示子菜单 -->
   <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-user"></i>
        <span>系统管理</span>
      </template>
      <!-- el-menu-item表示子菜单项,index设置为路由path，则可以跳转 -->
      <el-menu-item index="/dept/list">
        <i class="el-icon-user-solid"></i>
        部门管理
      </el-menu-item>
      <!-- el-menu-item表示子菜单项,index设置为路由path，则可以跳转 -->
      <el-menu-item index="/post/list">
        <i class="el-icon-user-solid"></i>
        岗位管理
      </el-menu-item>
      <!-- el-menu-item表示子菜单项,index设置为路由path，则可以跳转 -->
      <el-menu-item index="/user/list">
        <i class="el-icon-user-solid"></i>
        用户管理
      </el-menu-item>
      <!-- el-menu-item表示子菜单项,index设置为路由path，则可以跳转 -->
      <el-menu-item index="/role/list">
        <i class="el-icon-user-solid"></i>
        角色管理
      </el-menu-item>
      <!-- el-menu-item表示子菜单项,index设置为路由path，则可以跳转 -->
      <el-menu-item index="/menu/list">
        <i class="el-icon-user-solid"></i>
        权限管理
      </el-menu-item>
      
    </el-submenu>
    <!-- el-menu-item表示子菜单项,index设置为路由path，则可以跳转 -->
    <el-menu-item index="/course/list">
      <i class="el-icon-user-solid"></i>
      课程管理
    </el-menu-item>
    <!-- el-menu-item表示子菜单项,index设置为路由path，则可以跳转 -->
    <el-menu-item index="/activity/list">
      <i class="el-icon-user-solid"></i>
      活动管理
    </el-menu-item>
  </el-menu>
</template>

<script>
  export default {
    name:"LeftMenu"
  }
</script>

<style>
  /* 设置菜单所有标题样式文字靠左 */
  .el-submenu__title {
    text-align: left;
  }
  .aside-title {
    color: #fff;
    font-size: 25px;
    width: 220px;
    text-align: center;
  }
  .aside-user {
    color: #fff;
  }
  .aside-user h3 {
    margin: 5px;
  }
</style>